<form id="eventForm" name="eventForm"
      METHOD="POST" ACTION="<?= $_SERVER['PHP_SELF']; ?>"  onsubmit="return UTSDK.VALIDATION.validate('eventForm')">
    <input type="hidden" name="formSource" value="cEvent"/>
    <input type="hidden" name="action" value="create"/>
    <table>
        <tr>
            <td><label>Event: </label></td>
            <td>
                <select id="event" name="event"
                        data-validation="select" data-validationmessage="Event must be chosen"
                        data-required="false">
                    <option value="null">Create New</option>
                </select>
            </td>
            <td>
                <label id="eventError"></label>
                <input type="button" id="report" value="View Event Report" style="display:none;width:10em"/>
            </td>
        </tr>
        <tr>
            <td><label>Event Name: </label></td>
            <td><input id="eventName" type="text" name="eventName" placeholder="Event name"
                       data-validation="text" data-validationmessage="Must not be empty"/></td>
            <td><label id="eventNameError"></label></td>
        </tr>
        <tr>
            <td><label>Event Description: </label></td>
            <td><textarea id="eventDescription" type="text" name="eventDescription" placeholder="Event Description"
                          data-validation="text" data-validationmessage="Must not be empty" data-maxlength="300"></textarea></td>
            <td><label id="eventDescriptionError"></label></td>
        </tr>
        <tr>
            <td><label>Start Time: </label></td>
            <td><input id="eventStartTime" type="text" name="eventStartTime" 
                       placeholder="HH:MM" onkeydown="UTSDK.VALIDATION.checkTimeKeys(event)"
                       data-validation="time" data-validationmessage="Incorrect time format"/></td>
            <td><label id="eventStartTimeError"></label></td>
        </tr>
        <tr>
            <td><label>End Time: </label></td>
            <td><input id="eventEndTime" type="text" name="eventEndTime" data-after="eventStartTime"
                       placeholder="HH:MM" onkeydown="UTSDK.VALIDATION.checkTimeKeys(event)"
                       data-validation="time" data-validationmessage="Incorrect time format"/></td>
            <td><label id="eventEndTimeError"></label></td>
        </tr>
        <tr>
            <td><label>Start Date: </label></td>
            <td><input id="eventStartDate" type="text" name="eventStartDate" 
                       placeholder="YYYY-MM-DD" onkeydown="UTSDK.VALIDATION.checkDateKeys(event)"
                       data-validation="date" data-validationmessage="Incorrect date format"/></td>
            <td><label id="eventStartDateError"></label></td>
        </tr>
        <tr>
            <td><label>End Date: </label></td>
            <td><input id="eventEndDate" type="text" name="eventEndDate" data-after="eventStartDate"
                       placeholder="YYYY-MM-DD" onkeydown="UTSDK.VALIDATION.checkDateKeys(event)"
                       data-validation="date" data-validationmessage="Incorrect date format"/></td>
            <td><label id="eventEndDateError"></label></td>
        </tr>
        <tr>
            <td><label>Location Details: </label></td>
            <td><input id="locationDetails" type="text" name="locationDetails" placeholder="Location Details"
                       data-validation="text" data-validationmessage="Must not be empty" 
                       data-maxlength="100" data-required="true"/></td>
            <td><label id="locationDetailsError"></label></td>
        </tr>
        <tr>
            <td><label>Meeting Location: </label></td>
            <td><input id="meetingLocation" type="text" name="meetingLocation" placeholder="Meeting Location"/></td>
            <td><label id="meetingLocationError"></label></td>
        </tr>
        <tr>
            <td><label>Meeting Time: </label></td>
            <td><input id="meetingTime" type="text" name="meetingTime"  
                       placeholder="HH:MM" onkeydown="UTSDK.VALIDATION.checkTimeKeys(event)"
                       data-validation="time" data-required="false"/></td>
            <td><label id="meetingTimeError"></label></td>
        </tr>
        <tr>
            <td><label>Car Pool Location: </label></td>
            <td><input id="carPoolLocation" type="text" name="carPoolLocation" placeholder="Car Pool Location"/></td>
            <td><label id="carPoolLocationError"></label></td>
        </tr>
        <tr>
            <td><label>Car Pool Time: </label></td>
            <td><input id="carPoolTime" type="text" name="carPoolTime" 
                       placeholder="HH:MM" onkeydown="UTSDK.VALIDATION.checkTimeKeys(event)"
                       data-validation="time" data-required="false"/></td>
            <td><label id="carPoolTimeError"></label></td>
        </tr>
        <tr>
            <td><label>Manager 1: </label></td>
            <td>
                <select id="manager1" name="manager1" data-default="null">
                    <option value="null">none</option>
                </select>
            </td>
            <td><label id="manager1Error"></label></td>
        </tr>
        <tr id="mantr2" style="display:none">
            <td><label>Manager 2: </label></td>
            <td>
                <select id="manager2" name="manager2" data-default="null">
                    <option value="null">none</option>
                </select>
            </td>
            <td><label id="manager2Error"></label></td>
        </tr>
        <tr id="mantr3" style="display:none">
            <td><label>Manager 3: </label></td>
            <td>
                <select id="manager3" name="manager3" data-default="null">
                    <option value="null">none</option>
                </select>
            </td>
            <td><label id="manager3Error"></label></td>
        </tr>
        <tr id="mantr4" style="display:none">
            <td><label>Manager 4: </label></td>
            <td>
                <select id="manager4" name="manager4" data-default="null">
                    <option value="null">none</option>
                </select>
            </td>
            <td><label id="manager4Error"></label></td>
        </tr>
        <tr id="mantr5" style="display:none">
            <td><label>Manager 5: </label></td>
            <td>
                <select id="manager5" name="manager5" data-default="null">
                    <option value="null">none</option>
                </select>
            </td>
            <td><label id="manager5Error"></label></td>
        </tr>
        <tr>
            <td></td>
            <td><input class="submitBtn" type="button" value="Add Manager" id="addManager"/></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td><input class="submitBtn" type="submit" value="Submit" id="eventSubmit"/></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td><input class="submitBtn" style="display:none" type="button" value="Delete" id="eventDelete"/></td>
            <td></td>
        </tr>
    </table>
</form>
<script>
    /*
     * This module contains functions relating to the event form.
     * It constructs the event.php form to ensure that elements are correct and
     * functioning as expected
     * Contains one public method: updateForm() which can be accessed by calling
     * eventForm.updateForm();
     */
    var eventForm = (function() {
        var eventSelect = UTSDK.$("event");
        var addBtn = UTSDK.$("addManager");
        var reportBtn = UTSDK.$("report");
        var managers = [//manager list
            UTSDK.$("manager1"),
            UTSDK.$("manager2"),
            UTSDK.$("manager3"),
            UTSDK.$("manager4"),
            UTSDK.$("manager5")
        ];
        window.addEventListener("load", function() {
            UTSDK.disable(reportBtn);
            reportBtn.parentElement.style.position = "relative";
            reportBtn.style.zIndex = 5;
            reportBtn.style.position = "absolute";
            reportBtn.style.top = "0";
            var json = {managers: "all"};
            //Get the list of managers and add them to the options
            for (var i = 0; i < managers.length; i++) {
                UTSDK.updateSelect(json, managers[i], "update.php");
            }
            //Add change listener to enable/disable view report
            eventSelect.addEventListener("change", function() {
                if (eventSelect.value === "null")
                    UTSDK.disable(reportBtn);
                else
                    UTSDK.enable(reportBtn);
            });
            //Add click listener to report button
            reportBtn.addEventListener("click", function() {
                UTSDK.redirect("eventreport.php?report=" + eventSelect.value);
            });
            //Add click event unhide a managers select
            //When maximum number of managers is reached then hide button
            addBtn.addEventListener("click", function(evt) {
                for (var i = 0; i < managers.length; i++) {
                    if (!managerVisible(managers[i])) {
                        showManager(managers[i]);
                        if (i === 4)
                            addBtn.style.display = "none";
                        break;
                    }
                }
            });
        });

        //Worker methods: show, hide and check visibility
        function hideManager(manager) {
            manager.parentElement.parentElement.style.display = "none";
        }
        function managerVisible(manager) {
            return (manager.parentElement.parentElement.style.display === "");
        }
        function showManager(manager) {
            manager.parentElement.parentElement.style.display = "";
        }

        return {
            //Updates the visibility of the managers when called
            updateForm: function() {
                for (var i = 1; i < managers.length; i++) {
                    if (managers[i].value === "null") {
                        hideManager(managers[i]);
                        if (i === 4)
                            addBtn.style.display = "";
                    }
                    else {
                        showManager(managers[i]);
                        if (i === 4)
                            addBtn.style.display = "none"; //max number of managers
                    }
                }
            },
            showReportBtn: function(){
                UTSDK.fadeIn(reportBtn, 1);
            }
        };
    })();
</script>